$(function() {
	RoleTable();
	
});

var RoleTable = function() {
	layui
			.use(
					[ 'laydate', 'laypage', 'layer', 'table', 'element'],
					function() {
						var laydate = layui.laydate // 日期
						, laypage = layui.laypage // 分页
						, layer = layui.layer // 弹层
						, table = layui.table // 表格
						, element = layui.element // 元素操作
						var form = layui.form;
						var $ = layui.jquery;
						// 执行一个 table 实例
						var roleTable = table.render({
							elem : '#RoleTable',
							url : 'role', // 数据接口
							title : '角色信息表',
							page : true ,// 开启分页
							limits : [ 5, 10, 15 ],
							toolbar : 'default' ,// 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
							cols : [ [ // 表头
							{
								type : 'checkbox',
								fixed : 'left'
							}, {
								field : 'roleId',
								title : 'ID',
								sort : true,
								fixed : 'left',
							}, {
								field : 'roleName',
								title : '角色名',
							}, {
								field : 'description',
								title : '角色描述',
								sort : true,
							}, {
								field : 'roleable',
								title : '角色是否可用',
								templet: function(d){
									if(d.roleable==1){
										return '是'
									}else{
										return "<font color='#FF0000'>否</font>"
									}
								}
							}, {
								field : 'userable',
								title : '用户是否可用',
								templet: function(d){
									if(d.userable==1){
										return '是'
									}else{
										return "<font color='#FF0000'>否</font>"
									}
								}
							} ] ]
						});
						

						// 监听头工具栏事件
						table
								.on(
										'toolbar(RoleTable)',
										function(obj) {
											var checkStatus = table
													.checkStatus(obj.config.id), data = checkStatus.data; // 获取选中的数据
											switch (obj.event) {
											case 'add':
												// 弹出新增模态框
												initAddRoleModal();
												break;
											case 'update':
												if (data.length === 0) {
													layer.msg('请选择一行');
												} else if (data.length > 1) {
													layer.msg('只能同时编辑一个');
												} else {
													initUpdateRoleModal(data);
												}
												break;
											case 'delete':
												if (data.length === 0) {
													layer.msg('请选择一行');
												} else {
														// 调用删除方法
														deleteRole(data)
													
													
												}
												break;
											}
											;
										});

						

						// 初始化新增模态框
						var initAddRoleModal = function() {
							// 弹出一个页面层
							layer.open({
								type : 1 // 基本层类型0~4，1为页面层
								,
								title : '添加资源' // 标题
								,
								area : [ '400px', '550px' ] // 宽高
								// 只写一个参数就是表示宽度，高度会自适应
								,
								content : $("#addRoleModal") // 文本、html都行
								,
								anim : 0 // 弹出动画
								,
								resize : false // 是否允许拉伸
								,
								end : function() { // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
									// 清空表单
									$("#addRoleForm")[0].reset();
								}
							});

						}

						// 初始化修改模态框
						var initUpdateRoleModal = function(data) {
							data = data[0];
							// 弹出一个页面层
							layer.open({
								type : 1 // 基本层类型0~4，1为页面层
								,
								title : '修改资源' // 标题
								,
								area : [ '400px', '550px' ] // 宽高
								// 只写一个参数就是表示宽度，高度会自适应
								,
								content : $("#updateRoleModal") // 文本、html都行
								,
								anim : 0 // 弹出动画
								,
								resize : false // 是否允许拉伸
								,
								end : function() { // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
									// 清空表单
									$("#updateRoleForm")[0].reset();
								}
							});
							// 表单赋值
							form.val('updateRoleForm', {
								"roleId" : data.roleId,
								"roleName" : data.roleName,
								"roleable" : data.roleable,
								"description" : data.description,
								"userable" : data.userable
							});
						}

						var deleteRole = function(data) {
							console.log(data);
							var roleIds = "";
							for (var i = 0; i < data.length; i++) {
								roleIds += data[i].roleId + ",";
							}
							layer.confirm('确认删除吗？',function(index){
								$.ajax({
									type : "POST",
									url : 'role/' + roleIds,
									data : {
										_method : 'DELETE',
									},
									success : function(data) {
										if (data == true) {
											layer.confirm('删除成功');
										} else {
											layer.confirm('删除失败');
										}
										// 刷新数据表格
										table.reload('RoleTable', {
											url : 'role'
										});
									}
								})
							})
						}

						// 关闭模态框
						$(".modalClose").click(function() {
							// 关闭页面上所有类型的所有弹框
							layer.closeAll();
						});

						// 搜索框
						form.on('submit(roleSearchBtn)', function(data) {
							var data = data.field;
							// 执行后台代码
							roleTable.reload({
								where : { // 设定异步数据接口的额外参数，任意设
									"roleName" : data.roleName,
									"roleable" : data.roleable,
									"description" : data.description,
									"userable" : data.userable,
								},
								page : {
									curr : 1
								// 重新从第 1 页开始
								}

							});

							// 刷新数据表格
							// table.reload('resourceTable', {url:
							// 'sys/resources'});
							return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});
						//添加
						var addRole = function() {
							// 获取表单中填写的数据
							var addRoleFormData = $("#addRoleForm")
									.serialize();
							console.log(addRoleFormData);
							$.ajax({
								type : "POST",
								url : 'role',
								data : addRoleFormData,
								success : function(data) {
									if (data == true) {
										// 刷新数据表格
										layer.closeAll();
										layer.confirm('添加成功');
									} else {
										layer.confirm('添加失败');
									}
									// 刷新数据表格
									table.reload('RoleTable', {
										url : 'role'
									});
								}
							});
							return false;
						}
						// 修改
						var updateRole = function() {
							// 获取表单中填写的数据
							var  updateRoleFormData = $(
									"#updateRoleForm").serialize();
							$.ajax({
								type : "POST",
								url : 'role',
								data : updateRoleFormData,
								success : function(data) {
									if (data == true) {
										// 刷新数据表格
										layer.closeAll();
										layer.confirm('修改成功');
									} else {
										layer.confirm('修改失败');
									}
									// 刷新数据表格
									table.reload('RoleTable', {
										url : 'role'
									});
								}
							});
							return false;
						}
						
						// 为添加按钮绑定事件
						$("#addRole").click(addRole);
						$("#updateRoleBtn").click(updateRole);
					})

}
